<template>
	<view class="page">
		<!-- 顶部图片 -->
		<view class="box_top">
			<view class="image-container">
				<image class="uimages" :src="imageUrl1" mode="widthFix" />
			</view>
			<view style="padding: 0 250rpx;box-sizing: border-box; margin:30rpx 0;margin-bottom: 20rpx;">
				<image style="height: 46rpx; width: 248rpx; margin: 0 auto;" :src="imageUrl2" mode="widthFix" />
			</view>
		</view>

		<!-- 问题数据循环 -->
		<view style="padding: 0 20rpx;">


			<view class="box_nRqu" v-for="item in Collectdata" :key="item.fid">
				<!-- 问题标题 -->
				<view class="box_small" @click="Gocollect(item)">
					<view class="box_BT">
						{{ item.title }}
					</view>
					<!-- 解答人 -->
					<view class="box_qqjd">
						请求解答：{{ item.answers }}
					</view>
					<!-- 提问时间部分 -->
					<view class="box_zholia">
						<view style="font-weight: 400; font-size: 20rpx; color: #999999; display: flex;">
							提问时间：<view>{{ item.date }}</view>
						</view>
						<view style="display: flex; align-items: center;">
							<image style="width: 28rpx; height: 26rpx; margin-right: 3rpx;" src="/static/xiaoxi.png"
								mode="aspectFill" />
							<text style="font-weight: 400; font-size: 28rpx; color: #222222;">{{ item.fid }}</text>
						</view>
					</view>

					<!-- 底部头像信息 -->
					<view class="tiwnzhe">
						<view class="profile_name">
							<view>
								<image style="width: 60rpx; height: 60rpx; border-radius: 50%; background: blue;"
									src="../../static/u=3751317455,2980380885&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp"
									mode="aspectFill" />
							</view>
							<!-- 名字和归属 -->
							<view class="Nameattribution">
								<view class="name_mc">
									<view>{{ item.name }}</view>
									<view
										style="width: 80rpx; height: 30rpx; background: #EBF0FF; border-radius: 15rpx; font-size: 18rpx; color: #4170FF; text-align: center; line-height: 30rpx; margin-left: 14rpx;">
										{{ item.department }}
									</view>
								</view>
								<view class="Gsimingcheng">{{ item.corporatename }}</view>
							</view>
						</view>
						<view>
							<image style="width: 72rpx; height: 72rpx;" src="/static/ico@2x (1).png"
								mode="aspectFill" />
						</view>
					</view>
				</view>
			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl1: 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/banner@2x.png',
				imageUrl2: 'http://openapi.keyboardadmin.com:9001/KingdeeCommunity/title4@2x.png',
				Collectdata: [{
						fid: 9,
						title: "金蝶打印设置问题，怎么办？",
						answers: "@专业人士回复：在金蝶软件中调整打印参数，确保打印机连接正常。",
						date: "2024-09-29 16:30",
						message: null,
						name: "陈丽",
						department: "行政部",
						corporatename: "杭州星辰科技有限公司"
					},
					{
						fid: 10,
						title: "如何处理采购订单异常？",
						answers: "@专业人士回复：检查供应商信息，确保合同有效。",
						date: "2024-09-28 14:15",
						message: null,
						name: "李明",
						department: "采购部",
						corporatename: "上海云智科技有限公司"
					},
					{
						fid: 11,
						title: "财务报表生成失败，怎么办？",
						answers: "@专业人士回复：检查数据源是否正确，重新生成报表。",
						date: "2024-09-27 09:45",
						message: null,
						name: "王芳",
						department: "财务部",
						corporatename: "北京恒信科技有限公司"
					},
					{
						fid: 12,
						title: "怎么优化项目进度管理？",
						answers: "@专业人士回复：使用甘特图工具，定期更新项目状态。",
						date: "2024-09-26 11:00",
						message: null,
						name: "张伟",
						department: "项目管理部",
						corporatename: "广州智达科技有限公司"
					},
					{
						fid: 13,
						title: "如何提高客户满意度？",
						answers: "@专业人士回复：定期进行客户反馈调查，改进服务质量。",
						date: "2024-09-25 15:20",
						message: null,
						name: "赵强",
						department: "客服部",
						corporatename: "深圳创新科技有限公司"
					}
				]
			};
		},
		methods: {
			// 点击收藏按钮，跳转页面
			Gocollect(item) {
				console.log('点击了收藏按钮');
				console.log("item", item);
				uni.navigateTo({
					url: '/pages/Collectwebpages/Collectwebpages',
				});
			},
		},
		onLoad(e) {
			console.log("e", e);
		},
		onReady() {},
		onShow() {},
		onHide() {},
		onUnload() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {}
	};
</script>

<style scoped>
	.page {
		background-color: #F6F6F6;
		/* padding: 0 20rpx; */
		padding-bottom: 20rpx;

	}

	/* 图片容器 */
	.image-container {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.uimages {
		width: 100%;
		height: 320rpx;
	}

	/* 数据项样式 */
	.box_nRqu {
		margin: 20rpx auto;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding-bottom: 5rpx;
	}

	/* 问题标题 */
	.box_BT {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	/* 请求解答 */
	.box_qqjd {
		margin: 20rpx 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #4170FF;
	}

	/* 提问时间 */
	.box_zholia {
		font-weight: 400;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}

	/* 头像部分 */
	.tiwnzhe {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
		margin-top: 30rpx;
		border-top: 1rpx solid #ccc;
	}

	.Nameattribution {
		margin-left: 20rpx;
	}

	.name_mc {
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
		display: flex;
	}

	.Gsimingcheng {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.profile_name {
		display: flex;
		align-items: center;
	}
</style>